<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
		<meta content=”yes” name=”apple-mobile-web-app-capable” />
		<meta content=”black” name=”apple-mobile-web-app-status-bar-style” />
		<meta content=”telephone=no” name=”format-detection” />
		<meta content=”email=no” name=”format-detection” />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
		<link rel="stylesheet" type="text/css" href="css/book_city.css">
		<script src="js/flexible.debug.js"></script>
		<script src="js/flexible_css.debug.js"></script>
		
	    
	</head>
	<body>
		<header class="header">
			<span class="wode"><a href="">我的</a></span>
			<span class="shujia"><a href="">书架</a></span>
			<span class="shucheng"><a href="">书城</a></span>
			<div><img src="image/Img_3.png"/></div>
		</header>
		<!--<div class="nav">
			<div class="box">
				<p>精选</p>
				<p>分类</p>
				<p>排行</p>
				<p>发现</p>
			</div>
		</div>-->
		
		<table class="ta">
			<tr>
				<th>精选</th>
				<th>分类</th>
				<th>排行</th>
				<th class="th">发现</th>
			</tr>
			
		</table>
		<div class="Img">
				<a href="index.html"><img src="image/Img_9.png"/></a>
		</div>
		<div class="title">
			<dl>
				<dt><img src="image/Img_20.png"/></dt>
				<dd>男生</dd>
			</dl>
			<dl>
				<dt><img src="image/Img_21.png" alt="" /></dt>
				<dd>女生</dd>
			</dl>
			<dl>
				<dt><img src="image/Img_22.png" alt="" /></dt>
				<dd>出版</dd>
			</dl>
			<dl>
				<dt><img src="image/Img_23.png" alt="" /></dt>
				<dd>漫画</dd>
			</dl>
			<dl>
				<dt><img src="image/Img_25.png" alt="" /></dt>
				<dd>充值</dd>
			</dl>
			<dl>
				<dt><img src="image/Img_26.png" alt="" /></dt>
				<dd>更多</dd>
			</dl>
		</div>
		<div class="back"></div>
		<div class="msg">
			<span><img src="image/Img_28.png" alt="" /></span>
			<a href="">设置阅读偏好,可以看到更合胃口的书籍哦</a>
		    <div class="hot">
		    	<p>男生小说频道</p>
		    	<span>都市丶玄幻等5个精选区 本周人气122.5万</span>
		    	<img src="image/Img_29.png"/>
		    </div>
		    <div class="xian">
		    	<h2>主编重推</h2>
		    </div>
			    
			    <section class="lists">
			    	
			    </section>
			    
			    <script type="text/html" id="types">
				{{each products as v}}
	            <div>
	            	<img src="{{v.img}}"/>
	            </div>
                
            	{{/each}}
				</script>
		</div>
		<script src="js/jquery-3.2.1.js"></script>
			
		
		<script src="js/template-web.js">
		
			
		</script>
		</script>
		<script>
					$.ajax({
							type:"get",
							url:"book_city.json",
							success: function(data){
		                    console.log(data);
		                    var str = template("types", {products: data});
		                    $(".lists").append(str);
		                    }
						})
		</script>
	</body>
</html>
